<template>
  会员等级名称:<input
    type="text"
    placeholder="请输入会员等级名称"
    v-model="MRName"
  />
  会员等级状态:
  <select v-model="MRState">
    <option :value="0">--请选择--</option>
    <option :value="1">启用</option>
    <option :value="2">禁用</option>
  </select>
  <input type="button" value="查询" @click="GetMemberRank" />
  <table class="table table-bordered">
    <thead>
      <tr>
        <td>会员等级编号</td>
        <td>会员等级名称</td>
        <td>会员等级状态</td>
        <td>最小成长值</td>
        <td>最大成长值</td>
        <td>操作</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in Rank">
        <td>{{ item.rank_Id }}</td>
        <td>{{ item.rank_Name }}</td>
        <td>{{ item.rank_State==true ? "启用" : "禁用" }}</td>
        <td>{{ item.rank_MinPoint }}</td>
        <td>{{ item.rank_MaxPoint }}</td>

        <td>
          <a href="#" @click="UpSqlMemberRank(item.rank_Id)" style="margin-right: 20px">修改</a>
          <a href="#" v-show="item.rank_State==false" style="margin-right: 20px" @click="ChangState(item.rank_Id,true)">启用</a>
          <a href="#" v-show="item.rank_State==true" @click="ChangState(item.rank_Id,false)">禁用</a>
      
        </td>
      </tr>
    </tbody>
  </table>

  <span>
    当前共{{ pageInfo.totalCount }}条数据，每页显示{{ pageInfo.pageSize }}条数据，
    当前为第{{pageInfo.pageIndex}}/{{ pageInfo.pageCount }}页
    <a href="#" style="margin-right: 10px;" @click="TaKeInfo('首页')">首页</a>
    <a href="#" style="margin-right: 10px;" @click="TaKeInfo('尾页')">尾页</a>
    <a href="#" style="margin-right: 10px;" @click="TaKeInfo('上一页')">上一页</a>
    <a href="#" style="margin-right: 10px;" @click="TaKeInfo('下一页')">下一页</a>
 
  </span>

  <!-- 翻页 -->
  <select v-model="Csize" @change="ChangeSize">
     <option :value="1">1条/页</option>
     <option :value="2">2条/页</option>
     <option :value="3">3条/页</option>
  </select>

  <input  type="text" style="width:50px" v-model="NIndex">
  <input type="button" value="Go" @click="GetInfo">
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import axios from "axios";

//引入路由跳转组件
import { useRouter } from "vue-router";

const MRName = ref("");//等级名
const MRState = ref(0);//等级状态
const Csize = ref(1); //每页显示条数
const NIndex = ref("");//跳转的页码

// 查询
const GetMemberRank = () => {
  axios.get("https://localhost:7071/api/MemberRank/ShowMemberRank", {
    params: {
      Mname: MRName.value,
      Mstate: MRState.value,
    },
  });
};
// 创建路由跳转函数
const router = useRouter();
// 创建响应式数据
const Rank = ref([
  {
    rank_Id: 0,
    rank_Name: "",
    rank_State: true,
    rank_MinPoint: 0,
    rank_MaxPoint: 0,
  },
]);

// 定义响应式数据用于声明分页参数
const pageInfo = ref({
  pageIndex: 1,  //当前页码
  pageSize: 2,  //每页显示条数
  totalCount: 0, //总条数
  pageCount: 0, //总页数
});
// 生命周期钩子  页面一打开就执行
onMounted(() => {
  ShowMemberRank();
});

// 显示会员等级
const ShowMemberRank = () => {
  axios
    .get("https://localhost:7071/api/MemberRank/ShowMemberRank", {
      params: {
        Mname: MRName.value,
        Mstate: MRState.value,
        pageIndex: pageInfo.value.pageIndex,
        pageSize: pageInfo.value.pageSize,
      },
    })
      .then((res) => {
        console.log(res.data);
        Rank.value = res.data.pageDate;

        // 将数据总数、总页数赋值给响应式数据
        pageInfo.value.totalCount = res.data.totalCount;
      pageInfo.value.pageCount = res.data.pagelCount;
    });
};

// 获取跳转页面
const UpSqlMemberRank = (R_id: number) => {
  //  alert(R_id)
  router.push({
    name: "UpdateMemberRankView",
    params: {
      id: R_id,
    },
  });
};

// 跳转页面  首页  尾页
const TaKeInfo = (ch:string) => {
    switch (ch) {
        case "首页":
            pageInfo.value.pageIndex = 1;
            break;
        case "上一页":
            if (pageInfo.value.pageIndex > 1) {
                pageInfo.value.pageIndex--;
            }
            else{
                alert("已经是首页了")
            }
            break;
        case "下一页":
            if (pageInfo.value.pageIndex < pageInfo.value.pageCount) {
                pageInfo.value.pageIndex++;
            }
               else{
                alert("已经是尾页了")
            }
            break;
        case "尾页":
            pageInfo.value.pageIndex = pageInfo.value.pageCount;
            break;
        
    }
    ShowMemberRank();
}


// 跳转指定页
const GetInfo = () => {

  // 获取文本框数据
 var newIndex = NIndex.value;
   alert(newIndex)
  // 非空
  if (newIndex == "") {
    alert('跳转页码不能为空');
    return;
  }
  // 判断输入的是否为数字
  if (isNaN(Number(newIndex))) {
    alert('输入内容必须为数字');
    return;
  }
  // 跳转的页码必须大于0
  if (Number(newIndex) < 1) {
    alert('跳转的页码必须大于0');
    return;
  }
  // 跳转的页码不能大于总页数
  if(Number(newIndex)>pageInfo.value.pageCount){
    alert('跳转的页码不能大于总页数');
    return;
  }

  pageInfo.value.pageIndex = Number(newIndex)
  ShowMemberRank();
}


// 翻页
const ChangeSize = () => {
  pageInfo.value.pageSize = Csize.value;
  ShowMemberRank();
}

// 修改状态 启用 禁用
const ChangState = (MRid:Number,RankState:boolean) => {
  axios.get('https://localhost:7071/api/MemberRank/ChangeState', {
    params: {
      MRid: MRid
    }
  })
    .then(res => {
      if (res.data > 0) {
      alert('等级状态修改成功')
      }
      else {
       alert('等级状态修改失败')
     }
  })
}
</script>

<style scoped>
</style>